<template>
  <div v-if="infoModal" class="detail">
    <div class="header">
      <a-space size="middle">
        <a-icon type="edit" :style="{ fontSize: '20px', color: '#444' }" @click="edit" />
        <a-icon type="delete" :style="{ fontSize: '20px', color: '#444' }" @click="handelDelete" />
        <a-icon type="close" :style="{ fontSize: '20px', color: '#444' }" @click="close" />
      </a-space>
    </div>
    <div class="title">
      <div style="background-color:#23ffa3b6; width:12px;height:12px;border-radius:6px"></div>
      <p>{{ info && info.title}}</p>
    </div>
    <div class="time">
      <a-icon type="calendar" :style="{ fontSize: '18px', color: '#555' }" />
      <p>{{info && info.start | dateFilter }}</p>
    </div>
    <div class="footer">
      <p>该事件已经结束</p>
      <a @click="showDetail">详情></a>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
    }
  },
  props: {
    info: {
      type: Object,
      default: () => { }
    },
    infoModal: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'infoModal',
    event: 'cancel'
  },
  methods: {
    showDetail () {
      this.$emit('cancel', false)
      this.$emit('showEdit', this.info)
    },
    handelDelete () {
      let id = this.info.id
      this.$emit('onDelete', id)
    },
    edit () {
      this.$emit('showEdit')
    },
    close () {
      this.$emit('cancel', false)
    }
  },
  filters: {
    dateFilter (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 1000;
  width: 400px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 2px 2px 8px #04366446;

  .header {
    margin-left: 260px;
    padding: 0 20px;
    margin-top: 20px;
  }
  .title,
  .time {
    padding: 0px 20px;
    text-align: left;
    div,
    p {
      display: inline-block;
      text-align: left;
    }
  }
  p {
    font-size: 16px;
    line-height: 24px;
    color: #444;
    padding-left: 14px;
    vertical-align: middle;
  }
  .footer {
    padding: 10px 20px;
    border-top: solid 1px rgba(201, 201, 201, 0.377);
    display: flex;
    justify-content: space-between;
    align-items: center;
    :nth-child(1) {
      color: #c2c2c2;
      font-size: 16px;
      vertical-align: middle;
      line-height: 20px;
    }
    :nth-child(2) {
      color: #444;
      font-size: 16px;
      vertical-align: middle;
      line-height: 20px;
    }
  }
}
</style>
